.banner {
  position: relative;
  overflow: hidden;
  .circles {
    position: absolute;
    width: 160px;
    height: 20px;
    bottom: 10px;
    left: 50%;
    margin-left: -75px;
    z-index: 999999;
    li {
      float: left;
      width: 20px;
      height: 20px;
      background-color: #83ebd4;
      margin-right: 10px;
      border-radius: 10px;
      transition: all 0.5s ease 0s;

      &:last-child {
        margin-right: 0;
      }
      &.current {
        width: 40px;
        background-color: #20bd9a;
      }
    }
  }
  .carousel_list {
    width: 600%;
    overflow: hidden;
    transition: transform 0.5s ease 0s;

    // transform: translateX(-16.66%);
    li {
      float: left;
      width: 16.666%;

      img {
        width: 100%;
        // 白边的处理
        vertical-align: middle;
      }
    }
  }
  .center-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 1152px;
    left: 50%;
    margin-left: -576px;
    height: 100%;

    .banner-nav {
      height: 100%;
      width: 652px;
      position: relative;

      > ul {
        height: 100%;

        > li {
          height: 16.66%;
          width: 296px;
          background-color: rgba(0, 0, 0, 0.53);
          border-bottom: 1px solid #9e9e9e;
          box-sizing: border-box;
          position: relative;

          &:last-child {
            border-bottom: none;
          }

          dl {
            position: absolute;
            height: 48px;
            top: 50%;
            left: 42px;
            margin-top: -24px;
            color: white;

            > dt {
              font-size: 18px;
              line-height: 26px;
              height: 26px;
            }
            > dd {
              font-size: 16px;
              line-height: 22px;
              height: 22px;
            }
          }
          &::before {
            content: "";
            position: absolute;
            background-image: url(../images/icons.png);
            top: 50%;
            left: 10px;
          }

          &.hot::before {
            width: 22px;
            height: 18px;
            background-position: -29px -399px;
            margin-top: -9px;
          }
          &.hk::before {
            width: 18px;
            height: 21px;
            background-position: -28px -217px;
            margin-top: -10.5px;
            left: 13px;
          }
          &.jp::before {
            width: 24px;
            height: 19px;
            background-position: -25px -171px;
            margin-top: -9.5px;
          }
          &.as::before {
            width: 18px;
            height: 19px;
            background-position: -28px -262px;
            margin-top: -9.5px;
            left: 12px;
          }
          &.eu::before {
            width: 20px;
            height: 14px;
            background-position: -29px -351px;
            margin-top: -7px;
            left: 11px;
          }
          &.au::before {
            width: 18px;
            height: 17px;
            background-position: -28px -305px;
            margin-top: -8.5px;
            left: 12px;
          }

          &.current {
            background-color: rgba(0, 0, 0, 0.63);
          }
        }
      }
      .menus-box {
        .menu {
          display: none;
          position: absolute;
          left: 296px;
          top: 0;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.63);
          color: white;
          padding: 16px;
          box-sizing: border-box;
          z-index: 999999;

          &.current {
            display: block;
          }

          a {
            color: white;
          }
          dl {
            margin-bottom: 16px;

            dt {
              line-height: 30px;
              font-size: 18px;
            }
            dd {
              line-height: 25px;
              font-size: 15px;
            }
          }
        }
      }
    }
    .leftbtn {
      position: absolute;
      width: 28px;
      height: 44px;
      background: url(../images/icons.png) no-repeat -21px -94px;
      top: 50%;
      left: -38px;
      margin-top: -22px;

      &:hover {
        opacity: 0.8;
      }
    }
    .rightbtn {
      position: absolute;
      width: 28px;
      height: 44px;
      background: url(../images/icons.png) no-repeat -21px -29px;
      top: 50%;
      right: -38px;
      margin-top: -22px;

      &:hover {
        opacity: 0.8;
      }
    }
  }
}
